import React, { useEffect, useState } from 'react'
import { Select } from 'antd'
import { getChannelsApi } from '@/api/articles'
export default function Channels(props) {
  // 定义频道列表数据
  const [channels, setChannels] = useState([])
  useEffect(() => {
    // 获取频道列表数据
    const getChannels = async () => {
      const { data } = await getChannelsApi()
      // 设置数据
      setChannels(data.channels)
    }
    getChannels()
  }, [])

  return (
    // Select组件被Form.Itme包裹，然后Select组件的value和onChange就被Form.Itme接收
    <Select
      placeholder="请选择文章频道"
      style={{
        width: 200,
      }}
      // 触发父组件传递的onChange
      onChange={props.onChange}
      // 回显数据
      value={props.value}
    >
      {channels.map((item) => (
        <Select.Option key={item.id} value={item.id}>
          {item.name}
        </Select.Option>
      ))}
    </Select>
  )
}
